<!--  -->
<template>

<div class="main">
    <h1>todos</h1>
    <div id="app">
        <div class="top">
            <span @click="clickall">></span><input type="text" placeholder="What needs to be done?" @keyup.enter = "inp" v-model="inptext" v-focus>
        </div>

        <ul class="middle">
            <li v-for="(item,index) in filtertodos" :key="item.id">
                <input type="checkbox" v-model="item.ischecked">
                <div @dblclick="dbbox(index)">
                  <p v-if="index !== editline" :class="{ys:item.ischecked}">{{item.text}}</p>
                  <input type="text" name="" id="" v-model="item.text" v-else @blur="endedit">
                </div>
                <span class="del" @click="delli(index)">X</span>
            </li>
        </ul>

        <div class="bottom">
            <div class="left"><span>{{count}}</span>item left</div>
            <div class="right">
              <span :class="{active:isactive === 'All'}" @click="clickthree('All')">All</span>
              <span :class="{active:isactive === 'Active'}" @click="clickthree('Active')">Active</span>
              <span :class="{active:isactive === 'Complated'}" @click="clickthree('Complated')">Complated</span>
            </div>
            <span @click="clear" style="cursor: pointer;">Clear Completed</span>
        </div>
    </div> 
</div>    

</template>

<script>

import {mapGetters} from "vuex";
export default {
//import引入的组件需要注入到对象中才能使用
components: {},
//自定义指令
directives: {
  focus:{
    inserted:function(el){
      el.focus()
    }
  }
},
data() {
return {

  inptext:"",//输入框的内容
  editline:-1,//当前编辑的行
};
},
//监听属性 类似于data概念
computed: {
  ...mapGetters(['filtertodos','count','isactive']),

},
//监控data中的数据变化
watch: {
  // listarr:{
  //   handler:function(newlistarr){
  //     localStorage.setItem("todos",JSON.stringify(newlistarr));
  //   },
  //   deep:true
  // }
},
//方法集合
methods: {
  inp:function(){
    if(this.inptext != ""){
     this.$store.commit({
       type:"inp",
       payload:{
         text:this.inptext,
         ischecked:false,
         id:Date.now(),
       }
     })
      this.inptext = "";
    }else{
        this.$message({
          message:"输入的内容不能为空！",
          type:"warning"
        })
        return false;
    }
  },
  //点击全选
  clickall:function(){
   this.$store.commit("clickall");
  },
  //点击切换选项卡
  clickthree:function(showcom){
    this.$store.commit({
      type:"clickthree",
      payload:{
        ss:showcom
      }
    })
  },
  //双击变输入框
  dbbox:function(index){
    // console.log(index);
    this.editline = index;
  },
  //点击删除
  delli:function(index){
    this.$store.commit({
      type:"delli",
      payload:{
        index:index
      }
    })
  },
  //编辑完失去光标
  endedit:function(el){
    this.editline = -1;
  },
  //清除已完成  过滤掉已经选中的
  clear:function(){
    // this.listarr = this.listarr.filter(v => {
    //   return !v.ischecked;
    // })
    this.$store.commit('clear');
  }

},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="less"  scoped>
*{
    margin: 0;
    padding: 0;
}
body{
    background: #eeeeee;
    width: 100%;
    height: 100%;
    .main {
        width: 600px;
        margin: 30px auto 0;
        // border: 1px solid black;
        h1 {
            color: #EAD7D7;
            text-align: center;
            font-size: 70px;
            margin: 15px 0;
        }
        #app {
            width: 90%;
            border: 1px solid #eeeeee;
            box-shadow: 0px 3px 5px #aaaaaa;
            box-sizing: border-box;
            margin: 0 auto;
            background: #f9f9f9;
            .top{
                width: 100%;
                height: 65px;
                margin: 0 auto;
                display: flex;
                align-items: center;
                color: #cccccc;
                padding: 0 20px;
                box-sizing: border-box;
                border-bottom: 1px solid #cccccc;
                span{
                    transform: rotate(90deg);
                    font-weight: bold;
                    font-size: 26px;
                    color: #cccccc;
                }
                input{
                    width: 95%;
                    height: 55px;
                    padding-left: 20px;
                    font-size: 26px;
                    border: none;
                    background: #f9f9f9;
                    color: #cccccc;
                }
                input::placeholder{
                    color: #cccccc;
                    font-style: italic;
                }
            }
            .middle{
                width: 100%;
                background: white;
                overflow: hidden;
                li{
                    width: 100%;
                    height: 60px;
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #cccccc;
                    box-sizing: border-box;
                    padding: 0 20px;
                    div{
                      display: flex;
                      justify-content: space-around;
                      .ys{
                        text-decoration: line-through;
                        color:#ddd;
                      }
                      //普通文本
                      p{
                          margin-left: 18px;
                          color: black;
                          width: 450px;
                          height: 50px;
                          line-height: 50px;
                          font-size: 26px;
              
                      }
                      input{
                          margin-left: 18px;
                          color: black;
                          width: 450px;
                          height: 50px;
                          line-height: 50px;
                          font-size: 26px;
                          padding-left: 5px;
                      }
                      .show{
                        display: block;
                      }
                      .hidden{
                        display: none;
                      }
                    }
                    span{
                      color: #cf8888;
                      font-size: 20px;
                    }
                    .del{
                      visibility: hidden;
                      cursor: pointer;
                    }
                }
                li:hover .del{
                  visibility: visible;
                }

            }
            .bottom{
                width: 100%;
                height: 50px;
                display: flex;
                padding: 0 20px;
                align-items: center;
                background: white;
                color: #666666;
                box-sizing: border-box;
                justify-content: space-between;
                font-size: 14px;
                .right{
                    margin-right: 20px;
                    span{
                        margin-left: 10px;
                        padding: 0 5px;
                        cursor: pointer;
                    }
                     .active{
                        border: 1px solid #cccccc;
                        border-radius: 3px;
                    }
                }
            }

        }
      }
}
</style>